<template>
  <div class="searchBox">
    <van-search
      v-model="address"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @update:model-value="suggestion"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-cell-group class="list" v-show="addressList.length > 0">
      <van-cell
        v-for="(v, i) in addressList"
        :key="i"
        :title="v.address"
        @click="checkAddress(v.location, v.address)"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { throttle } from '@/utils/common'
import { get } from '@/utils/request'
import { reactive, toRefs, watch } from 'vue'
export default {
  name: 'Search',
  props: {
    address: {
      type: String,
      default: ''
    },
    lat: {
      type: String,
      default: ''
    },
    lng: {
      type: String,
      default: ''
    },
    updateLatLng: {
      type: Function,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    let data = reactive({
      addressList: []
    })
    watch(
      () => props.address,
      (address) => {
        {
          if (props.address == '') {
            data.addressList = []
          }
        }
      }
    )
    //点击搜索
    const onSearch = throttle(async () => {
      if (!props.address) return
      // let res = await get('/ws/place/v1/search', {
      //   keyword: props.address,
      //   boundary: `nearby(${props.lat},${props.lng},1000)`
      // })
      // data.addressList = res.data
      var params = {
        keyword: props.address,
        boundary: `nearby(${props.lat},${props.lng},1000)`,
        key: 'VYKBZ-AAF3U-NHBVL-BKPFE-MTOIO-EDBDH',
        get_poi: 1
      }
      params.output = 'jsonp'
      $.ajax({
        type: 'get',
        url: `https://apis.map.qq.com/ws/place/v1/search`,
        dataType: 'jsonp',
        data: params,
        jsonp: 'callback',
        jsonpCallback: 'QQmap',
        success: (res) => {
          data.addressList = res.data
        },
        error: function(errors) {
          // console.log(errors);
        }
      })
    }, 300)
    const suggestion = throttle(async () => {
      if (!props.address) return
      // let res = await get('/ws/place/v1/suggestion', {
      //   keyword: props.address
      // })
      // data.addressList = res.data
      var params = {
        keyword: props.address,
        key: 'VYKBZ-AAF3U-NHBVL-BKPFE-MTOIO-EDBDH',
        get_poi: 1
      }
      params.output = 'jsonp'
      $.ajax({
        type: 'get',
        url: `https://apis.map.qq.com/ws/place/v1/suggestion`,
        dataType: 'jsonp',
        data: params,
        jsonp: 'callback',
        jsonpCallback: 'QQmap',
        success: (res) => {
          console.log(res)
          data.addressList = res.data
        },
        error: function(errors) {
          // console.log(errors);
        }
      })
    }, 300)
    const checkAddress = (location, address) => {
      let { lat, lng } = location
      data.addressList = []
      emit('updateLatLng', { lat, lng, address })
    }
    return {
      ...toRefs(data),
      onSearch,
      suggestion,
      checkAddress
    }
  }
}
</script>

<style scoped lang="less">
.searchBox {
  position: relative;
  .list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 99999;
  }
}
</style>
